<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col>
        <!--群组数据-->
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="80px" v-show="showSearch" >
          <el-form-item label="群名称" prop="groupName">
            <el-input v-model="queryParams.groupName" placeholder="请输入群名称" size="small" clearable style="width: 150px"/>
          </el-form-item>
          <el-form-item label="群组职位" prop="leader">
            <el-select @change="handleQuery" v-model="queryParams.leader" size="small" clearable style="width: 150px" placeholder="请选择">
              <el-option key="" label="全部" value=""/>
              <el-option key="2" label="群主" value="2"/>
              <el-option key="1" label="管理员" value="1"/>
              <el-option key="0" label="普通成员" value="0"/>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker @change="handleQuery" v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"  size="mini" icon="el-icon-search" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery('queryForm')">重置</el-button>
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="createChatGroup">创建群组</el-button>
          </el-col>

          <right-toolbar :showSearch.sync="showSearch" @queryTable="queryMyChatGroupPageResList" :columns="columns"></right-toolbar>
        </el-row>

        <el-table ref="multipleTable" :stripe="true" v-loading="loading" :data="dataList" @selection-change="handleSelectionChange"
                  @sort-change='tableSortChange' :default-sort="{prop: 'sort', order: 'descending'}">
          <el-table-column label="头像" align="center" prop="headPortrait" width="100">
            <template slot-scope="scope">
              <img width="40" height="40" @click="openGroupDetail(scope.row)" :src="scope.row.groupAvatar" :onerror="$store.state.defaultAvatar"/>
            </template>
          </el-table-column>
          <el-table-column label="群名称" sortable='custom' align="left" prop="groupName"   width="250">
            <template slot-scope="scope">
              <span @click="openGroupDetail(scope.row)" v-text="scope.row.groupName"></span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime" sortable='custom' width="200"/>
          <el-table-column label="群组职位" align="center" prop="leader"  width="150">
            <template slot-scope="scope">
              <el-tag type="success"  v-if="scope.row.leader===2">群主</el-tag>
              <el-tag type="warning"  v-if="scope.row.leader===1">管理员</el-tag>
              <el-tag type="info"  v-if="scope.row.leader===0">普通成员</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="群介绍" align="left" prop="groupIntroduce" />
          <el-table-column label="操作" align="center" width="250" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-message"  @click="toTalkPage(scope.row)">发送消息</el-button>
              <el-button size="mini" type="text" v-if="scope.row.leader!==2" icon="el-icon-switch-button"  @click="secedeChatGroupByGroupId(scope.row)">退出群组</el-button>
              <el-button size="mini" type="text" v-if="scope.row.leader===2" icon="el-icon-close"  @click="dismissChatGroupByGroupId(scope.row)">解散群组</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.rows"
                    @pagination="queryMyChatGroupPageResList"/>
      </el-col>
    </el-row>

    <!-- 创建群聊组件 -->
    <GroupLaunch
      v-if="launchGroupShow"
      @close="launchGroupShow = false"
      @create-success="groupChatSuccess"
    />

    <!-- 查询群组详情 -->
    <div class="broadside-box" v-show="groupDetailId">
      <group-panel
        :group-id="groupDetailId"
        @close="groupDetailId = 0"
        @send-group="sendMessage"
        @disturb-change="disturbChange"
        @quit-group="quitGroupSuccess"
      />
    </div>
  </div>
</template>
<script>
  import GroupPanel from '@/components/DuoJuHe/Chat/group/GroupPanel'
  import GroupLaunch from '@/components/DuoJuHe/Chat/group/GroupLaunch'
  import { queryMyChatGroupPageResList,secedeChatGroupByGroupId,dismissChatGroupByGroupId } from '@/api/chat/im/chatGroup'
  import { toTalk } from '@/utils/talk'
  //默认查询参数
  let defaultQueryParams = {
    groupName: undefined,
    leader: "",
    startTime: undefined,
    endTime: undefined,
    page: 1,
    rows: 10
  }
  export default {
    name: "myChatGroupList",
    components: {
      GroupLaunch,
      GroupPanel
    },
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 日期范围
        dateRange: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 显示搜索条件
        showSearch: true,
        // table表格数据
        dataList: [],
        //是否打开创建群组
        launchGroupShow: false,
        //查询群组详情群组id
        groupDetailId: 0,
        // 查询参数
        queryParams: { ...defaultQueryParams },
        //列信息
        columns: []
      }
    },
    created() {
      this.queryMyChatGroupPageResList();
    },
    methods: {
      /** 我的群组列表 */
      queryMyChatGroupPageResList() {
        this.loading = true
        queryMyChatGroupPageResList(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.dataList = response.data.records
          this.total = response.data.total
          this.loading = false
        })
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.groupId)
        this.single = selection.length !== 1;
        this.multiple = !selection.length
      },
      //排序
      tableSortChange(column){
        //格式化排序参数，构建中
        this.orderByFormat(this.queryParams,column);
        //执行查询方法
        this.queryMyChatGroupPageResList()
      },

      /** 退出群聊 */
      secedeChatGroupByGroupId(row) {
        row = row.isTrusted ? this.$refs.multipleTable.selection[0] : row;
        const groupId = row.groupId;
        const groupName = row.groupName;
        this.$confirm('确认退出【'+groupName+'】群组?', "警告", {
          cancelButtonText: "取消",
          confirmButtonText: "确定",
          type: "warning"
        }).then(function() {
          return secedeChatGroupByGroupId({groupId:groupId});
        }).then(response => {
          this.$modal.msgSuccess("您已成功退出【"+groupName+"】群组 ...");
          this.queryMyChatGroupPageResList();
        }).catch(function() {});
      },

      /** 管理员解散群聊服务接口 */
      dismissChatGroupByGroupId(row) {
        row = row.isTrusted ? this.$refs.multipleTable.selection[0] : row;
        const groupId = row.groupId;
        const groupName = row.groupName;
        this.$confirm('确认解散【'+groupName+'】群组?', "警告", {
          cancelButtonText: "取消",
          confirmButtonText: "确定",
          type: "warning"
        }).then(function() {
          return dismissChatGroupByGroupId({groupId:groupId});
        }).then(response => {
          this.$modal.msgSuccess("您已成功解散【"+groupName+"】群组 ...");
          this.queryMyChatGroupPageResList();
        }).catch(function() {});
      },


      // 创建群组
      createChatGroup() {
        this.launchGroupShow = true
      },
      // 发起群聊成功后回调方法
      groupChatSuccess(data) {
        // 发起群聊回调事件
        toTalk(2, data)
      },

      // 跳转聊天页面
      toTalkPage(row) {
        toTalk(2, row.groupId)
      },

      // 查看群信息
      openGroupDetail(row) {
        this.groupDetailId = row.groupId
      },

      // 群聊窗口点击发送群聊信息按钮回调事件
      sendMessage(groupId) {
        this.toTalkPage(2, groupId)
      },
      // 根据用户对话索引获取对话数组对应的key
      getGroupIndex(groupId) {
        return this.dataList.findIndex(item => item.groupId === groupId)
      },
      // 用户退出群聊回调事件
      quitGroupSuccess() {
        this.$delete(this.dataList, this.getGroupIndex(this.groupDetailId))
        this.groupDetailId = 0
      },
      // 修改群聊免打扰状态
      disturbChange(detail) {
        let index = this.getGroupIndex(detail.groupId)
        this.items[index].isDisturb = detail.status
      },

      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.page = 1
        this.queryMyChatGroupPageResList()
      },
      /** 重置按钮操作 */
      resetQuery(fromId) {
        this.dateRange = [];
        this.resetForm(fromId);
        this.handleQuery()
      }
    }
  }
</script>
<style scoped lang="less">
  @import '~@/assets/styles/chat/contacts.less';
</style>
